import React from "react"
import seachStyle from "./seach.module.css"
import { SearchBar} from 'antd-mobile';
import { Search,Nowmusic} from "../api/index"
import {withRouter} from "react-router-dom"
@withRouter
class SeachInput extends React.Component { 
  constructor(props) {
    super(props)
    this.state = {
      val: ""
    }
  }
  handleval(e) {
    this.setState({
      val: e
    })
  }
  searchMV(e){
    // console.log(e) 
    Search(e)
    .then(body=>body.json())
    .then(res=>{
      let {id}=res.result.songs[0]
      // console.log(id)
      Nowmusic(id)
      .then(body=>body.json())
      .then(res=>{
        let {id}=res.data[0]
        // console.log(id)
        this.props.history.push("/playmusic?id="+id)
      })
      this.setState({
        val:""
      })
    })
     
    }  
  render() {
    return (<div>
      <SearchBar className={seachStyle.secipt} placeholder="搜索" maxLength={8} value={this.state.val} onSubmit={this.searchMV.bind(this)} onChange={this.handleval.bind(this)}/>
    </div>);
  }
}
export default SeachInput